<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="top">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="名称" prop="unit">
            <el-input class="input" v-model="searchParams.name" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search"
              style="margin-left:40px">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-form :model="searchParams" ref="searchParams" :inline="true" style="margin:10px 0">
          <el-button @click="operateAction('create', {})" type="primary" plain size='small'>新增</el-button>
          <el-button @click="operateAction('delete', {})" type="info" plain size='small'>删除</el-button>
        </el-form>
        <el-table :data="dataList" size='medium' ref="multipleTable" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="id" width="50" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column prop="adminModel" label="管理员" show-overflow-tooltip>
            <template slot-scope="{row, index}">
              {{ row.adminModel && row.adminModel.username}}
            </template>
          </el-table-column> -->
          <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="addr" label="地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="statusLabel" label="状态" show-overflow-tooltip>
            <template slot-scope="{row, index}">
              {{ formData.dicts.status[row.status] }}
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="顺序" show-overflow-tooltip></el-table-column>
          <el-table-column prop="redact" label="操作" fixed="right" width="120">
            <template slot-scope="{ row, index }">
              <el-button type="text" @click="operateAction('update', row)" size='medium'>修改</el-button>
              <el-button type="text" @click="operateAction('detail', row)" size='medium'>详情</el-button>
              <!-- <el-button type="text" @click="operateAction('onekeyLessee', row)" size='medium' v-if="passRole(['admin'])">克隆租户</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
          :page.sync="page" :limit.sync="size" @pagination="getDataList" />
      </el-col>
    </el-row>
    <el-dialog title="" :visible.sync="isShow" destroy-on-close @close="close">
      <div style="font-weight: bold;font-size: 18px;">被复制加盟商信息：</div>
      <el-form label-width="120px" :inline="true">
        <el-form-item label="加盟行ID" prop="shopName">
          {{selectShop.id}}
        </el-form-item>
        <el-form-item label="加盟商名称" prop="name">
          {{selectShop.name}}
        </el-form-item>
      </el-form>
      <div style="font-weight: bold;font-size: 18px;">新加盟商信息：</div>
      <el-form :model="itemModel" :rules="rules" ref="itemModel" label-width="120px" :inline="true">
        <el-form-item label="名称" prop="name">
          <el-input v-model="itemModel.name" placeholder="请输入昵称" clearable maxlength='20' show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="itemModel.contacts" placeholder="请输入联系人" clearable maxlength='20' show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="itemModel.phone" placeholder="请输入电话" clearable maxlength='11' show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="intro">
          <el-input v-model="itemModel.intro" placeholder="请输入介绍" clearable maxlength='200' show-word-limit type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="submitForm('itemModel')">确认操作</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formData } from './data'
import { findLesseeList, deleteLessees } from '@/api/system/lessee.js'
import { getItemList, getFormData, request_post } from '@/api/interface/operate.js'
import { Loading } from 'element-ui'
export default {
  components: { },
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      dataList: [],
      searchParams: {},
      formData,
      itemModel: {},
      selectShop: {},
      multipleSelection: [],
      fullscreenLoading: null,
      isShow: false,
      rules: {
        name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }]
      },
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    handleSearch() {
      this.page = 1
      this.getDataList()
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      findLesseeList(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    },
    operateAction(scene, row) {
      switch (scene) {
        case 'create':
          this.$router.push({name: 'Update', query: {formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name }})
          break;
        case 'update':
          this.$router.push({name: 'Update', query: {rowId: row.id, formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name}})
          break;
        case 'detail':
          this.$router.push({name: 'Detail', query: {rowId: row.id, formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name}})
          break;
        case 'onekeyLessee':
          this.isShow = true
          this.selectShop = row
          break;
        case 'delete':
          if(this.multipleSelection.length<=0){
            this.$message({
              message: '请选择操作行',
              type: 'info'
            })
          }else{
            var rowIds = this.multipleSelection.map(function (item) {
              return item.id
            })
            var _this = this
            this.$confirm('是否确认删除选中的' + rowIds.length + '条记录?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function () {
              return deleteLessees({
                obj_ids: rowIds
              }).then(res => {
                if (res.data.code == 10000) {
                  _this.getDataList()
                  _this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                }
              })
            })
          }
          break;
        default:
          break;
      }
    },
    submitForm(formName) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = Loading.service({ fullscreen: true, text: '商户数据初始化中，请稍后！'});
            this.itemModel.lesseeId = this.selectShop.id
            request_post('/system/lessee/onekeyLessee' + 'Action/', this.itemModel).then((res) => {
              this.fullscreenLoading.close()
              if(res.data.code == 10000){
                this.getDataList()
                this.$message({
                  message: '初始化开放商户成功',
                  type: 'success'
                })
                this.isShow = false
              }
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    close(){
      this.isShow = false
    },
  },
}
</script>


<style lang="scss" scoped></style>
